<template>
	<view class="empire-cart__item">
		<view class="empire-cart__checked">
			<radio :checked="modelChecked" @click="handleChange"></radio>
		</view>
		<EmpireImageHorizontal
			width="140rpx"
			height="140rpx"
			:src="src"
			:title="title"
			grid-template-rows="2fr 2fr 1fr"
			grid-template-columns="1fr 4fr"
		>
			<template #subTitle>
				<EmpireTag type="primary" size="mini" text="极速退款" />
				<EmpireTag class="empire-cart__tag" type="warn" size="mini" text="正品保障" />
			</template>
			<template #description class="empire-mall__flex-between">
				<view class="empire-image__price">
					<text class="empire-mall__price">¥ {{ discount || '0.00' }}</text>
					<text v-if="price" class="origin-price">¥ {{ price }}</text>
				</view>
				<uni-icons
					v-if="editable"
					class="ease-fade"
					type="trash"
					size="23"
					color="#e64340"
					@click="handleDelete"
				></uni-icons>
				<uni-number-box v-else class="ease-fade" v-model="modelNumber" :min="1"></uni-number-box>
			</template>
		</EmpireImageHorizontal>
	</view>
</template>

<script setup>
import EmpireImageHorizontal from '../empire-image/empire-image-horizontal.vue';
import EmpireTag from '../empire-tag.vue';
import EmpireCartSummary from './empire-cart-summary.vue';
import { ref, watch, onMounted, computed } from 'vue';

const props = defineProps({
	editable: {
		type: Boolean,
		default: false
	},
	src: {
		type: String,
		default: undefined
	},
	title: {
		type: String,
		default: undefined
	},
	discount: {
		type: Number,
		default: undefined
	},
	price: {
		type: Number,
		default: undefined
	}
});
const modelChecked = defineModel('checked', { type: Boolean, default: false });
const modelNumber = defineModel('number', { type: Number, default: 0 });
const emits = defineEmits(['change', 'remove']);

onMounted(() => {});
function handleChange() {
	modelChecked.value = !modelChecked.value;
	const price = props.price || 0;
	const number = modelNumber.value || 1;
	const value = Math.round(props.price * modelNumber.value * 100) / 100;
	emits('change', modelChecked.value);
}
function handleDelete() {
	emits('remove');
}
</script>

<style lang="scss" scoped>
.empire-cart__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx;
	border-bottom: 1px solid #e6e6e6;
}
.empire-cart__checked {
	margin-right: 20rpx;
}
.empire-cart__tag {
	margin-left: 24rpx;
}
.empire-image__tags {
	display: flex;
	justify-content: space-around;
}
.empire-image__price {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.origin-price {
	text-decoration-line: line-through;
	color: #c0c6cc;
	margin-left: 36rpx;
}

@keyframes fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.ease-fade {
	animation: 300ms fade ease-in-out;
}
</style>